<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>{{ msg }}</p>
        <input type="text" v-model="msg">
    </div>
    <!-- 
        在script 标签上添加 type="module" 启用 ES 模块系统
    -->
    <script type="module" >
        //  CommonJS  关键字  导入 require ; 导出 module  module.exports
        //  ES module  关键字 导入 import from  ;  导出 export    export default
        /*
            CommonJS 和 ES module 模块系统都具有如下的相同特性
                1、模块包装器保证作用域独立
                2、都支持省略后缀的自动补充功能(只在node环境下运行的项目有效)
                3、模块都具有缓存功能（多次导入只会加载一次）

            AMD:依赖前置模块系统 = 先完成模块导入，在需要使用时在进行调用
                let koa = require("koa");
                ……
                new koa()
            
            CMD:依赖就近模块系统 = 什么时候用什么时候加载
                layui.use("form",function(){
                    
                })

            UMD:统一模块导入系统 = 一个环境即支持AMD又支持CMD
                AMD：
                    let koa = require("koa");
                    ……
                    new koa()
                CMD
                    let import = function(path){
                        return require(path)
                    }
                    let koa = import("koa");
                    new koa

        */


        /*
            导出规则
                默认导出(在同一个js文件中只能有一个)  export default 导出功能(变量、方法、对象、数组 ……)
                分解导出(在同一个js文件中可以出现多个)  export 定义表达式  功能单独导出
                    => 默认导出和分解导出可以同时定义在一个文件中

            导入规则
                import 自定义变量名称-指向default导出的数据 from 'ES模块文件地址'
                import { 单导出的变量名,…… } from "ES模块文件地址";
                import { 单导出的变量名 as 新变量名,…… } from "ES模块文件地址";
                import * as 定义对象变量 from 'ES模块文件地址'
                        ==> 将模块文件中所有的导出数据整合成一个完整对象

        */
        import Vue from "./js/vue.esm.browser.js";
        console.log(Vue)

        new Vue({
            el:"#app",
            data:{
                msg:"测试"
            }
        })

        // import 自定义变量名称-指向default导出的数据 from 'ES模块文件地址'
        import obj from './module/test.js'
        console.log(obj)

        // 解构导入
        // import { 单导出的变量名,…… } from "ES模块文件地址";
        import { username,user,print } from "./module/test.js";
        console.log( username )
        console.log( user )
        console.log( print )

        // 重命名导入
        // import { 单导出的变量名 as 新变量名,…… } from "ES模块文件地址";
        import { username as uname } from "./module/module.js";
        console.log(uname)

        // 整合导入
        // import * as 定义对象变量 from 'ES模块文件地址'
        //      ==> 将模块文件中所有的导出数据整合成一个完整对象
        import * as temp from './module/test.js'
        console.log( temp )

        // 拆分导入
        import obj2 , { student,print as print2 } from "./module/module2.js";
        console.log(obj2)
        console.log(student)
        console.log(print2)
    </script>
</body>
</html>